import { sendMessage } from "webext-bridge";
import { getPath } from "./selector";

let overlayContent: HTMLDivElement;
overlayContent = document.createElement("div");
overlayContent.style.position = "fixed";
overlayContent.style.zIndex = "99999999999999";
overlayContent.style.pointerEvents = "none";
overlayContent.style.backgroundColor = "rgba(65, 184, 131, 0.35)";
overlayContent.style.fontFamily = "monospace";
overlayContent.style.fontSize = "11px";
overlayContent.style.padding = "4px 8px";
overlayContent.style.borderRadius = "3px";
overlayContent.style.color = "#333";
overlayContent.style.textAlign = "center";
overlayContent.style.border = "rgba(65, 184, 131, 0.5) 1px solid";
overlayContent.style.backgroundClip = "padding-box";
overlayContent.style.opacity = "0.5";

export default class Picker {
  constructor() {
    this.bindMethods();
  }

  /**
   * Adds event listeners for mouseover and mouseup
   */
  startSelecting() {
    document.body.appendChild(overlayContent);
    window.addEventListener("click", this.elementClicked, true);
    window.addEventListener("mouseover", this.elementMouseOver, true);
    window.addEventListener("mouseout", this.cancelEvent, true);
    window.addEventListener("mouseenter", this.cancelEvent, true);
    window.addEventListener("mouseleave", this.cancelEvent, true);
    window.addEventListener("mousedown", this.cancelEvent, true);
    window.addEventListener("mouseup", this.cancelEvent, true);
  }

  /**
   * Removes event listeners
   */
  stopSelecting() {
    console.log("stop-stop");
    window.removeEventListener("click", this.elementClicked, true);
    window.removeEventListener("mouseover", this.elementMouseOver, true);
    window.removeEventListener("mouseout", this.cancelEvent, true);
    window.removeEventListener("mouseenter", this.cancelEvent, true);
    window.removeEventListener("mouseleave", this.cancelEvent, true);
    window.removeEventListener("mousedown", this.cancelEvent, true);
    window.removeEventListener("mouseup", this.cancelEvent, true);
    document.body.removeChild(overlayContent);
  }

  /**
   * Highlights a component on element mouse over
   */
  async elementMouseOver(e: MouseEvent) {
    this.cancelEvent(e);

    const el = e.target;
    // console.log(el);
    const { height, width, top, left } = el.getBoundingClientRect();

    overlayContent.style.left = left + "px";
    overlayContent.style.top = top + "px";
    overlayContent.style.height = height + "px";
    overlayContent.style.width = width + "px";
  }

  /**
   * Selects an instance in the component view
   */
  async elementClicked(e: MouseEvent) {
    this.cancelEvent(e);
    this.stopSelecting();

    console.log(e);
    const res = await sendMessage("choice", getPath(e.target), "devtools");
    console.log(res);
  }
  /**
   * Cancel a mouse event
   */
  cancelEvent(e: MouseEvent) {
    e.stopImmediatePropagation();
    e.preventDefault();
  }
  /**
   * Bind class methods to the class scope to avoid rebind for event listeners
   */
  bindMethods() {
    this.startSelecting = this.startSelecting.bind(this);
    this.stopSelecting = this.stopSelecting.bind(this);
    this.elementMouseOver = this.elementMouseOver.bind(this);
    this.elementClicked = this.elementClicked.bind(this);
  }
}
